<template>
	<inline-Modal :visible="visible" title="字典分类" :showOk="false" @cancel="() => {$emit('cancel')}">
		<tool-bar>
			<template slot="toolBtn" slot-scope="scope">
				<a-button class="cu-btn-primary" icon="plus" @click="handleAdd">
					新增
				</a-button>
				<a-button
				    type="link"
				    icon="upload"
				    @click="importReportFile"
				>{{$ct('Import','导入')}}
				</a-button>
			</template>
		</tool-bar>
		<div class="page-content">
			<a-table
				ref="treeTable"
				rowKey="uuid"
				:columns="columns"
				:data-source="treeData"
				:pagination="false"
				:scroll="scrollXY"
				:defaultExpandedRowKeys="defaultExpandedRowKeys"
			>
				<span slot="renderAction" slot-scope="text, record, index">
					<template>
						<a @click="handleEdit(record)">编辑</a>
						<span class="action-margin"></span>
						<a @click="handleSub(record)" class="action-delete">删除</a>
						<a-dropdown>
						  <a class="ant-dropdown-link">
						    {{$ct('more','更多')}}
						    <a-icon type="down"/>
						  </a>
						  <a-menu slot="overlay">
						    <a-menu-item>
						      <a @click="exportFile(record)">{{$ct('exportFile','导出文件')}}</a>
						    </a-menu-item>
						  </a-menu>
						</a-dropdown>
					</template>
				</span>
			</a-table>
		</div>

		<edit-form
			ref="masterModal"
			:loading="confirmLoading"
			:visible="editVisible"
			:model="mdl"
			@cancel="handleCancel"
			@ok="handleOk"
		/>
		
		<web-upload
			ref="webUploadModal"
			:visible="visibleFile"
			:showTipText="true"
			:width="450"
			url="/system/dicSet/importSysDicSetJson"
			@cancel="() => visibleFile = false"
			@ok="importReportJson"
		/>
		
	</inline-Modal>

</template>

<script>
import { TreeGrid } from "@/components";
import { treeGridMixin } from "@/mixins/treeGridMixin";
import editForm from "./masterEdit.vue";
import {getToken} from "@/utils/TopVUI";
import {baseUrl} from "@/services/baseUrl.js";

export default {
	components: { TreeGrid, editForm },
	mixins: [treeGridMixin],
  props: {
    visible: {
      type: Boolean,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {
      title: "",
			confirmLoading: false,
			columns: [
			  {
			    title: "名称",
			    align: "left",
			    dataIndex: "dicSetName"
			  },
			  {
			    title: "编码",
			    dataIndex: "dicSetCode",
			    align: "center"
			  },
				{
				  title: "排序",
				  dataIndex: "dicSetSort",
				  align: "center"
				},
			  {
			    title: "操作",
			    width: 200,
			    align: "center",
			    dataIndex: "action",
			    scopedSlots: { customRender: "renderAction" }
			  },
			],
			parameter: {
			  father: {
			    levelId: 1,
			  },
			  children: {},
			},
			mdl: null,
			editVisible: false,
			selectedRowKeys: [],
			treeData: [],
			defaultExpandedRowKeys: [],
			pageClientHeight: 0,
			visibleFile: false,
			token: ""
    };
  },
	computed: {
		rowSelection() {
			return {
				selectedRowKeys: this.selectedRowKeys,
				onChange: this.onChange,
			};
		},
		scrollXY() {
		  let pageClientHeight = this.pageClientHeight ? this.pageClientHeight : 500
		  let height = pageClientHeight - 160
		  return { y : height};
		}
	},
	created() {
		this.loadData();
	},
	mounted() {
		this.resizeHandler();
		this.initResizeEvent();
		this.token = getToken();
	},
	beforeDestroy() {
	  this.destroyResizeEvent();
	},
  methods: {
		initResizeEvent() {
		  window.addEventListener("resize", this.resizeHandler, false);
		},
		//移除resize
		destroyResizeEvent() {
		  window.removeEventListener("resize", this.resizeHandler);
		},
		resizeHandler() {
		  // 获取页面内容的高度
		  this.pageClientHeight = document.getElementsByClassName(
		    "page-content"
		  )[0]?.clientHeight;
		},
    add(m, data) {
      console.log(m, data);
    },
    edit(m, data) {
      console.log(m, data);
    },
		handleAdd(){
			this.editVisible = true;
			this.$refs.masterModal.form.resetFields();
			this.$refs.masterModal.title = "新增";
		},
		handleEdit(record){
			this.editVisible = true;
			this.mdl = record;
			this.$refs.masterModal.title = "编辑";
		},
		loadData(){
			this.$post("/system/dicSet/getTreeSysDicSet").then(res => {
				if(res.statusCode === 200){
					this.treeData = res.data
					this.defaultExpandedRowKeys = [res.data[0].uuid]
				}
			})
		},
		onChange(selectedRowKeys){
			this.selectedRowKeys = selectedRowKeys;
		},
		handleOk(){
			const form = this.$refs.masterModal.form
			this.confirmLoading = true
			let url = ''
			form.validateFields((errors, values) => {
				if (!errors) {
					if (values.uuid) {
						url = "/system/dicSet/update"
					} else {
						url = "/system/dicSet/save"
					}
					this.$post(url, values).then((res) => {
						if (res.statusCode === 200) {
							this.loadData();
							this.$emit("reloadTree");
							this.editVisible = false;
							this.$message.success(res.message || '操作成功', 1.5);
						} else {
							this.$message.error(res.message || '操作失败', 1.5);
						}
					}).finally(() => {
						this.confirmLoading = false;
					})
				} else {
					this.confirmLoading = false;
				}
			})
		},
		handleCancel(){
			this.editVisible = false;
		},
		handleSub(record){
			const that = this;
			that.$confirm({
			  title: that.$ct("tips","提示"),
			  content: that.$ct("deleteConfirmationPrompt","确定删除该数据吗？删除之后不可恢复！"),
			  okText: that.$ct("confirm","确定"),
			  cancelText: that.$ct("cancel","取消"),
			  closable: true,
			  icon: () => that.$createElement('a-icon', {
			  	props: {
			  		key: 'warning',
			  		type: 'exclamation-circle',
			  		twoToneColor: '#faad14'
			  	}
			  }),
			  onOk() {
			    that.$post("/system/dicSet/delete", {
						uuid: record.uuid
					}).then((res) => {
						if (res.statusCode === 200) {
							that.$message.success(res.message);
							that.loadData();
							that.$emit("reloadTree");
						} else {
							that.$message.info(res.message);
						}
					});
			  },
			  onCancel() {
			    console.log("Cancel");
			  },
			});
		},
		importReportJson() {
		  this.visibleFile = false;
		  this.loadData();
		},
		importReportFile() {
		  this.$refs.webUploadModal.add();
		  this.visibleFile = true;
		},
		exportFile(record){
			window.location.href =
			  baseUrl +
			  "/system/dicSet/exportSysDicSetJson?uuid=" + record.uuid +
			  "&token=" +
			  this.token;
		}
		
  },
	
};
</script>
<style scoped lang="less">
	/deep/.ant-table-tbody>tr>td, /deep/.ant-table-thead>tr>th{
		padding: 9px !important;
	}
</style>
